<template>
  <panel title="精选理财" class="manage-money">
    <div class="container">
      <dl class="item" v-for="item in manageList" :key="item.title">
        <dt>{{item.title}}</dt>
        <dd>{{item.dd1}}</dd>
        <dd>{{item.dd2}}</dd>
        <dd>{{item.dd3}}</dd>
      </dl>
    </div>
  </panel>
</template>
<script>
import Panel from '@/components/core/panel.vue'

export default {
  name: 'manage-money',
  components: { Panel },
  data () {
    return {
      manageList: [
        {
          title: '当日起息 随取随存',
          dd1: '百信智惠存',
          dd2: '4.100%',
          dd3: '今日支取收益率'
        },
        {
          title: '兼顾收益与灵活',
          dd1: '定期90天',
          dd2: '4.300%',
          dd3: '满期综合收益率'
        },
        {
          title: '中长期佳选',
          dd1: '定期180天',
          dd2: '4.500%',
          dd3: '满期综合收益率'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/element.scss';

.manage-money {
  .container {
    @include list(row);
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
    .item {
      overflow: hidden;
      font-size: 24px;
      width: 32%;
      box-sizing: border-box;
      text-align: center;
      border: 1px solid #CCC;
      font-weight: 700;
      padding-bottom: 10px;
      box-shadow: #EEE 0 0 4px 4px;
      dt {
        color: #969C99;
        background-color: #E9EDF7;
        padding: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      :nth-child(2) {
        color: #3D465C;
        font-size: 26px;
        line-height: 80px;
      }
      :nth-child(3) {
        color: #FA5555;
        font-size: 38px;
        font-family: Arial, Helvetica, sans-serif;
      }
      :nth-child(4) {
        color: #969C99;
        font-size: 26px;
        line-height: 70px;
      }
    }
  }
}
</style>
